<template>
  <!-- 版本列表 -->
  <el-dialog
    v-bind="$attrs"
    :visible.sync="visible"
    v-if="visible"
    :close-on-click-modal="false"
    class="Fg-Dialog"
    append-to-body
    :style="{'--height':height,'--footer':footer?'62px':'0px'}"
  >
    <slot></slot>
    <slot name="footer" v-if="footer">
      <div slot="footer">
        <el-button @click="handleCancel">{{ cancelText }}</el-button>
        <el-button :loading="loading" type="primary" @click="handleConfirm">{{ confirmText}}</el-button>
      </div>
    </slot>
  </el-dialog>
</template>

<script>
export default {
  props: {
    cancelText: {
      type: String,
      default: "取消",
    },
    confirmText: {
      type: String,
      default: "确认",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    footer: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
      default: "60vh",
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    handleCancel() {
      this.close();
      this.$emit("cancel");
    },
    handleConfirm() {
      // this.visible = false;
      this.$emit("confirm");
    },
  },
};
</script>

<style lang="scss" >
.Fg-Dialog {
  overflow: hidden !important;
  .el-dialog {
    overflow: hidden;
    // margin-top: calc(
    //   (100vh - var(--height) - var(--footer) - 54px) / 2
    // ) !important;
    .el-dialog__body {
      overflow: auto;
      height: var(--height);
      // height: calc(var(--height) - var(--footer) - 54px);
    }
  }
  .is-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    .el-dialog__body {
      height: auto;
      flex: 1;
    }
  }
}
</style>
